<template>
    <div>

        <a-table
            :columns="tableColumn"
            :dataSource="subtableRights"
            :pagination="false"
            :bordered="true"
            size="small"
            class="mytable"
        >

            <template slot="type" slot-scope="text, record, index">
                <a-radio-group name="radioGroup" v-model="record.type" @change="radioGroupChange(record)"
                               :defaultValue="text">
                    <a-radio value="all">
                        {{$ti18('rxList.all','全部')}}
                    </a-radio>
                    <a-radio value="user">
                        {{i18n('list.my','我的')}}
                    </a-radio>
                    <a-radio value="group">
                        {{i18n('list.dep','部门')}}
                    </a-radio>
                    <a-radio value="sql">
                        {{i18n('list.custom','自定义')}}
                    </a-radio>
                </a-radio-group>
            </template>

            <template slot="setting" slot-scope="text, record, index">
                <div v-if="record.type=='sql'">
                    <rx-input-button width="80%" v-model="record.setting" :config="{}"
                                     @click="setSetting($event,record,index)"></rx-input-button>
                </div>
            </template>
        </a-table>
    </div>
</template>
<script>
import { RxDialog, Dialog, RxInputButton,Util} from "@lowcode/jpaas-common-lib";
import LodopError from "@/views/modules/form/core/LodopError";
import RxMonacoEditDialog  from "@/views/modules/form/core/dialog/rx-monaco-edit-dialog"


export default {
    name: 'form-subalias-permission-edit',

    components: {
        RxDialog,
        Dialog,
        RxInputButton,
    },
    props: {
        shouInput: false,
        /**
         * 子表权限。
         */
        subtableRights: {
            type: Array,
            default: []
        },
        /**
         * 属性
         */
        attrList:{
            type: Array,
            default: []
        }
    },
    data() {
        return {

            tableColumn: [
                {title: this.i18n('form.tableName','表'), dataIndex: 'name', scopedSlots: {customRender: 'name'}, width: 80},
                {title: this.i18n('form.type','类型'), dataIndex: 'type', scopedSlots: {customRender: 'type'}, width: 100},
                {title: this.$ti18('rxList.config','配置'), dataIndex: 'setting', scopedSlots: {customRender: 'setting'}, width: 160}
            ],
            //表前缀
            tablePrefix:"",
            //字段前缀
            colprePrefix:""
        }
    },
    created() {

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formPermiss",key);
        },
        radioGroupChange(record) {
            record.setting = "";
            if (record.type === "sql") {
                var initSql = "return \" select * from w_" + record.alias + " where REF_ID_=#{w.fk} \";";
                record.setting = JSON.stringify({text: this.i18n('list.alreadySet','已设置'), value: initSql});
            }
        },
        setSetting(vm, record, index) {
            var setting = record.setting;
            var sql = "";
            if (setting) {
                var settingObj = JSON.parse(setting);
                sql = settingObj.value;
            }

            var config = {
                curVm: this,
                component: RxMonacoEditDialog,
                widthHeight: ['800px', '600px'],
                title:"配置SQL",
                data: {
                    monacoValue: sql,
                    attrList: this.attrList
                }
            };
            let self = this;
            Util.open(config, function (action,sql) {
                vm.setVal(sql, self.i18n('list.alreadySet','已设置'))
            })
        },

    },

}
</script>
<style scoped>
.formTit {
    padding: 10px 0 0 20px;
    color: #555;
    font-size: 14px;
}

.mytable >>> .ant-table-thead > tr > th,
.mytable >>> .ant-table-tbody > tr > td {
    padding: 8px !important;
}
</style>